<template>
	<view class="zone">
		<Header title="交流群"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">

				<view class="erweima">
					<image class="gcode" :src="qqimg" mode="widthFix"></image>
				</view>
				<view class="etip">
					截图保存，QQ扫一扫加群
				</view>

				<view class="sp">
					玩家交流群
				</view>
				<view class="inpt">
					<input type="number" :disabled="true" v-model="code" class="ipt" />
					<view class="copy" @click="$p.copy(code)">
						复制
					</view>
				</view>

				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="onePress"
					@click="enjoyqq">一键加群</u-button>
				<view class="sp" style="margin-top: 30px;">
					兑换码
				</view>
				<view class="inpt">
					<input type="number" v-model="yqcode" class="ipt" placeholder="请输入兑换码" />

					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="copy"
						@click="duihuan">兑换</u-button>
				</view>

				<view class="explain">
					<view class="eps">
						提示
					</view>
					<p class="eps2"> 无法一键加群请复制群号或保存二维码加群</p>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				qqurl: '',
				qqimg: '',
				yqcode: '',
			}
		},
		onLoad() {

		},
		onShow() {
			this.getQQInfo()
		},
		methods: {
			// 获取QQ信息
			async getQQInfo() {
				let res = await this.$http.index.getQun();
				if (res.data) {
					this.code = res.data.qq_qun
					this.qqimg = res.data.bar_code
					this.qqurl = res.data.link
				}
			},
			enjoyqq() {
				if (this.$u.os() == 'ios') {
					location.href = this.qqurl
				} else if (this.$u.os() == 'android') {
					let w = plus.webview.create(this.qqurl);
					w.show();
					setTimeout(() => {
						plus.webview.close(w)
					}, 3500);
				} else {
					location.href = this.qqurl
				}

			},
			async duihuan() {
				if (this.yqcode == '' || this.yqcode == null) {
					this.$u.toast('请先输入兑换码')
					return
				}
				let res = await this.$http.index.taskRedemptioCode({
					redemption_code: this.yqcode
				});
				if (res.cdoe == 1) {
					this.$u.toast(res.msg)
				} else {
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		height: calc(100vh - 97px);
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 10px 6px 0;
		border-bottom: 6px solid #b0a3a1;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.erweima {
		display: block;
		margin: 0 auto;
		width: 66%;
		// background: url(http://image.qxgm.site/tdz/img/jiaoliu/mg-01.png) no-repeat;
		// background-size: 100% 100%;
		box-sizing: border-box;
		padding: 10%;
	}

	.gcode {
		width: 100%;
	}

	.etip {
		margin: 10px 7px 4vh;
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		background: url(http://image.qxgm.site/tdz/img/jiaoliu/mg-03.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		padding: 4px 0 9px;
	}

	.sp {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		margin-left: 45px;
		margin-bottom: 12px;
	}

	.inpt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		border: 1px solid rgba(51, 51, 51, 0.95);
		border-radius: 1px;
		margin: 0 20px 30px;
		padding: 4px 4px 4px 18px;
		box-sizing: border-box;
	}

	.copy {
		width: 75px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		line-height: 33px;
		color: #fefbca;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.onePress {
		display: block;
		margin: 0 auto;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fefbca;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.explain {
		background: url(http://image.qxgm.site/tdz/img/jiaoliu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 26px 36px;
		margin-top: 5vh;

		.eps {
			font-size: 22px;
			font-weight: normal;
			color: #333333;
			line-height: 22px;
			background: linear-gradient(0deg, #BCB8BA 0%, #834302 0%, #8E5471 99.12109375%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 12px;
		}
	}
</style>